<template>
    <ul class="com-tabs">
        <li v-for="item in list" :class="{cue: item.selected}" @click="selectTab(item)">{{ item[textKey] }}</li>
    </ul>
</template>

<script>
    export default {
        name: 'tabs',
        props: {
            list: {type: Array, default: []},
            textKey: {type: String, default: 'text'},
        },
        computed: {
            selectedTab(){
                for(let i = 0; i < this.list.length; i++){
                    if(this.list[i].selected){
                        return this.list[i];
                    }
                }
                return null;
            }
        },
        methods: {
            selectTab(item){
                this.list.forEach(function (citem) {
                    this.$set(citem, 'selected', false);
                }.bind(this));
                this.$set(item, 'selected', true);
                this.$emit('select', item);
            },
        },
    }
</script>

<style lang="scss">
    .com-tabs{display: inline-block;height: 32px;box-sizing: border-box;border: 1px solid #afb8bd;border-radius: 4px;}
    .com-tabs li{float: left;min-width: 80px;height: 30px;line-height: 30px;text-align: center;cursor: pointer;padding: 0 8px;box-sizing: border-box;}
    .com-tabs li.cue{border-radius: 3px;background: #47bac1;color: #fff;}
</style>
